<template>
	<view class="order">
		<none v-if="total===0"></none>
		<view class="pay" v-else v-for="(item,index) in order" :key="item.id">
			<view class="pay-top">
				<view class="pay-top-left">
					{{item.created_at}}
				</view>
				<view class="pay-top-right">
					{{item.status_text}}
				</view>
			</view>
			<view class="pay-bottom">
				<view class="pay-bottom-left">
					<view class="goods_text" v-for="(value,index) in item.goods" :key="value.goods_text">
						{{value.goods_text}}
					</view>
					<view class="wxpay">
						{{item.payment_text}}
					</view>
				</view>
				<view class="pay-bottom-right">
					￥{{item.charge}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import none from '@/components/none.vue'
	import {getUserOrder} from '@/request/user.js'
export default {
	components:{none},
	data(){
		return{
			page:1,
			page_size:10,
			order:{},
			total:0
		}
	},
	 // onLoad: function (options) {
	 //        setTimeout(function () {
	 //            console.log('下拉刷新');
	 //        }, 500);
	 //        uni.startPullDownRefresh();
	 //    },
	    onPullDownRefresh() {
	        console.log('停止刷新');
	        setTimeout(function () {
	            uni.stopPullDownRefresh();
	        }, 500);
	    },

	onShow() {
		this.getOrder()
	},
	methods:{
		async getOrder(){
			let res = await getUserOrder({
				page:this.page,
				page_size:this.page_size
			})
			// console.log(res)
			this.order = res.data.data.data
			console.log(this.order)
			this.total = res.data.data.total
			// console.log(this.total)
		}
	}
}
</script>

<style lang="less">
	body{
		background-color: #f2f2f2;
	}
	.order{
.pay{
	padding: 30rpx;
	background-color: #fff;
	.pay-top{
		display: flex;
		justify-content: space-between;
		.pay-top-left{
			color: #bebebe;
			font-size: 32rpx;
		}
		.pay-top-right{
			color: red;
			font-size: 32rpx;
		}
	}
	.pay-bottom{
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.pay-bottom-left{

			.goods_text{
				font-size: 36rpx;
			}
			.wxpay{
				margin-top: 20rpx;
				font-size: 32rpx;
				color: #bebebe;
			}
		}
		.pay-bottom-right{
			font-size: 50rpx;
		}
	}
}
	}
</style>
